<template lang="">
  <div>
    <div slot="header">
      <span>文章点赞TOP5排行榜</span>
    </div>
    <ul class="Ranking">
      <li v-for="(item,index) in rankingList" @click="GotoArticleDetail(item.id)">
        <div class="Commentareaboxs">
          <i>{{index+1}}.</i>
          <span>{{item.title}}</span>
        </div>
        <hr>
      </li>
    </ul>
  </div>
</template>
<script>
    export default {
        data() {
            return {
                rankingList: []
            }
        },
        methods: {
            getranking() {
                this.$axios.get('/ranking').then(res => {
                    this.rankingList = res.data.msg
                })
            },
            // 去文章详情
            GotoArticleDetail(id) {
                this.$router.push({
                    name: 'detail',
                    params: {
                        id: id
                    }
                })
            }
        },
        mounted() {
            this.getranking()
        },
    }
</script>
<style lang="less" scoped>
    .Ranking {
        li:first-child {
            color: red;
        }
        li:nth-child(2) {
            color: rgba(5, 114, 252);
        }
        li:nth-child(3) {
            color: rgba(88, 175, 0)
        }
        li {
            font-size: 14px;
            margin: 20px 0;
            width: 100%;
            cursor: pointer;
        }
        .Commentareaboxs {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
            span {
                margin-left: 10px;
            }
        }
    }
</style>